<template>
    <input 
        :type="type"
        :value="inputValue"
        @input="inputHandler"
    />
</template>

<script>
    export default {
        props: ['type', 'value'],
        name: 'my-input',
        data() {
            return {
                inputValue: this.value
            }
        },
        methods: {
            inputHandler(e) {
                this.inputValue = e.target.value
                // 通知父组件
                this.$emit('input', this.inputValue)
                // 通知父组件开始校验
                this.$parent.$emit('validate');
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>